<template>
    <div>
      <div>
			<van-nav-bar style="background: #d12d1a;" class="fh"   @click-left="$router.back()" title="忘记密码" left-text="返回" left-arrow />
		</div>
      <div>
    <van-form @submit="onSubmit">
    <van-field
      v-model="username"
      name="username"
      label="用户名"
      placeholder="请输入用户名"
      :rules="[{ required: true, message: '请填写用户名' },
    { pattern:/^1[3-9]\d{9}$/, message: '电话格式错误' }
    ]"
    />
    <van-field v-model="vercode" name="vercode" center clearable label="短信验证码" placeholder="请输入短信验证码" :rules="[{ required: true, message: '请输入短信验证码' },
       { pattern:/^\d{6}$/, message: '格式错误' }
    ]">
				<template #button>
					<van-button :disabled="disabled" loading-text="发送中..." @click="fs" native-type="button" size="small"
						type="primary">{{yzm}}</van-button>
				</template>
			</van-field>
    <van-field
      v-model="password"
      type="password"
      name="password"
      label="新密码"
      placeholder="请输入新的密码"
      :rules="[{ required: true, message: '请输入新的密码' },{ validator:(val)=>/^\w{6,12}$/.test(val), message: '请输入6-12位的的密码格式' }]"
    />

   
    <div style="margin: 16px;">
      <van-button  round block type="info" native-type="submit">提交</van-button>
    </div>
  </van-form>
      </div>
    </div>
  </template>


  <script>
 import {wjmmjk} from '@/api/wjmm'
 import {yzmhq} from '@/api/dljk'
 let sl = null;
	let dsq = null;
  export default {
    data() {
      return {
        username: '',
        password: '',
        vercode:'',
        yzm:'发送验证码',
        sl:60,
        disabled:false
      };
    },
   
   
    methods: {
      fs(){
        if(this.username==''){
          this.$toast('请输入用户名')
            return
        }
      
       
        yzmhq({
          type:'login',
          mobile:this.username
        }).then(res=>{
          console.log(res)
          if(res.code==0){
           this.$toast(res.msg+res.data)
           dsq=setInterval(()=>{
               this.sl--
               this.yzm=this.sl+'s后可以发送'
               if(this.sl>0){
                this.disabled=true
                }else{
          clearInterval(dsq)
            this.yzm='再次获取'
            this.sl=60
            this.disabled=false

        }
        },1000)
          }
        })
      },
      onSubmit(values) {
        console.log('submit', values);
        console.log(values)
  
        let {username,password,vercode} = values


        wjmmjk({
          vercode:vercode,
          username:username,
          password,password
        }).then((res)=>{
          console.log(res)
          if(res.code==0){
           this.$toast(res.msg)
          }
        })
        // xgmmjk({
         
             
        // }).then((res)=>{
        //   console.log(res)
        //   if(res.code==0){
        //       this.$toast(res.msg)
        //       localStorage.clear();
        //       this.$store.commit('mkhuser/TCDL')
        //       setTimeout(()=>{
        //              this.$router.push('dlu')
        //       },500)
        //   }else{
        //     this.$toast(res.msg)
        //   }
        // })
      },
    },
  };
  </script>
  
  <style scoped>
	.input:-internal-autofill-selected {
		background-color: none;
	}
		::v-deep .van-ellipsis{
		color: #FFB619;
	}
	::v-deep .van-nav-bar__text{
 color: #FFB619;
	}
	::v-deep .van-icon-arrow-left{
		color: #FFB619;
	}
	::v-deep .van-button--info{
		background: #d12d1a;
		border: 1px solid #d12d1a;
		color: #FFB619;
	}
	.van-button--small{
		background: #d12d1a;
		border: 1px solid #d12d1a;
		color: #FFB619;
		/* background: #244028;
		border: 1px solid #244028; */
	}
	/* ::v-deep .van-field__label{
		color: #FFB619;
	} */
</style>